<template>
  <ParticlesComponent 
    class="cjui-particles"
    :id="particlesId" 
    :particlesInit="particlesInit"
    :particlesLoaded="particlesLoaded"
    :options="options"
    :style="{
      zIndex: zIndex
    }"
  />
</template>

<script lang="ts" setup>
import { ParticlesComponent } from 'vue3-particles'
import { loadFull } from 'tsparticles';
import { randomWord } from '@/utils/basic/string';

defineOptions({
  name: 'CjuiParticles'
})

defineProps({
  zIndex: {
    type: Number,
    default: 0
  },
  options: {
    type: Object,
    default: () => ({})
  }
});

const particlesId = 'id' + randomWord() + (new Date()).getTime();

const particlesInit = async (engine) => {
  await loadFull(engine);
}

const particlesLoaded = async (container) => {}
</script>

<style lang="scss">
.cjui-particles {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>
